<template>
	<div class="box">
		<div class="wrap">
			<div class="name">
				<p class="txt">循环水智控</p>
				<!-- <img class="img" src="../../assets/logo.png" /> -->
			</div>
			<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="ruleForm">
				<el-form-item prop="user_name">
					<el-input v-model="ruleForm.user_name" type="text" autocomplete="off" placeholder="请输入账号">
						<template #prefix>
							<el-icon class="el-input__icon">
								<user />
							</el-icon>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input v-model="ruleForm.password" type="password" autocomplete="off" placeholder="请输入密码"
						show-password="true">
						<template #prefix>
							<el-icon class="el-input__icon">
								<lock />
							</el-icon>
						</template>
					</el-input>
				</el-form-item>

				<el-form-item><el-button type="primary" size="large" color="#165dff" class="btn"
						@click="submitForm(ruleFormRef)" :loading="btnLoading">登录</el-button></el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue'
	import type { FormInstance } from 'element-plus'
	import { User, Lock } from '@element-plus/icons-vue'
	import { setToken, setRoles } from '@/utils/auth'
	import { useRouter } from 'vue-router'

	import Token from '@/utils/encryption'
	import { login } from '@/api/api.ts'
	import { ElMessage } from 'element-plus'
	import md5 from 'js-md5'

	const router = useRouter()
	const btnLoading = ref(false)

	const ruleFormRef = ref<FormInstance>()

	const validateName = (rule : any, value : any, callback : any) => {
		if (value === '') {
			callback(new Error('请输入账号'))
		} else {
			callback()
		}
	}
	const validatePass = (rule : any, value : any, callback : any) => {
		if (value === '') {
			callback(new Error('请输入密码'))
		} else {
			callback()
		}
	}
	const token = Token.authToken()
	const ruleForm = reactive({
		password: '',
		user_name: ''
	})
	const rules = reactive({
		password: [{ validator: validatePass, trigger: 'blur' }],
		user_name: [{ validator: validateName, trigger: 'blur' }],
	})

	const submitForm = (formEl : FormInstance | undefined) => {
		if (!formEl) return
		formEl.validate((valid) => {
			if (valid) {
				btnLoading.value = true
				// 访问登录接口
				let data = {
					user_name: ruleForm.user_name,
					password: ruleForm.password,
				}
				console.log(data)
				let formData = new FormData();
				formData.append('userName', ruleForm.user_name)
				formData.append('password', ruleForm.password)
				login(formData)
					.then((res : any) => {
						console.log(res)
						if (res.data.code === 200) {
							// 登录成功后；保存用户信息以及token
							// ElMessage.success(res.data.msg)
							btnLoading.value = false
							Token.setStorage(res.data.data.companyId, 'company_id');
							Token.setStorage(res.data.data.companyName, 'company_name');
							Token.setStorage(res.data.data.userId, 'userId');
							ElMessage.success('登录成功！')
							setToken(res.data.data.jwtToken)
							let jurisdiction = "admin"
							setRoles(jurisdiction)//权限
							router.push('/')
						} else {
							ElMessage.error(res.data.msg)
						}
					})
					.finally(() => {
						btnLoading.value = false
					})

			} else {
				ElMessage.error('请输入用户名和密码')
				console.log('error submit!')
				return false
			}
		})
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100%;
		background: url('../../assets/login.png') no-repeat;
		display: flex;
		justify-content: flex-end;
		align-items: center;

		.wrap {
			margin-right: 15%;
			padding: 30px;
			border-radius: 20px;
			background-color: #f6fafd;

			.name {
				margin-bottom: 1.5rem;
				display: flex;
				align-items: center;
				justify-content: center;

				.txt {
					// font-size: 36px;
					// // color: #3e7de1;
					// margin-right: 1rem;
					// letter-spacing: 5px;
					// font-weight: bold;
					// background: linear-gradient(315deg, #42d392 25%, #3e7de1);
					// -webkit-background-clip: text;
					// -webkit-text-fill-color: transparent;

					margin-right: 1rem;
					letter-spacing: 5px;
					font-weight: bold;
					font-size: 36px;
					background: linear-gradient(to right, #8b5cf6 10%, #3b82f6 25%, #3b82f6 50%, #3b82f6 75%, #3b82f6 100%);
					background-size: 200% auto;
					color: #3e7de1;
					background-clip: text;
					text-fill-color: transparent;
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					-webkit-animation: shine 20s ease infinite;
					animation: shine 20s ease infinite;
				}

				@keyframes shine {
					0% {
						background: linear-gradient(to right, #8b5cf6 10%, #3b82f6 25%, #3b82f6 50%, #3b82f6 75%, #3b82f6 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}

					25% {
						background: linear-gradient(to right, #8b5cf6 10%, #8b5cf6 25%, #3b82f6 50%, #3b82f6 75%, #3b82f6 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}

					50% {
						background: linear-gradient(to right, #8b5cf6 10%, #8b5cf6 25%, #8b5cf6 50%, #3b82f6 75%, #3b82f6 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}

					75% {
						background: linear-gradient(to right, #8b5cf6 10%, #8b5cf6 25%, #8b5cf6 50%, #8b5cf6 75%, #3b82f6 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}

					100% {
						background: linear-gradient(to right, #8b5cf6 10%, #8b5cf6 25%, #8b5cf6 50%, #8b5cf6 75%, #8b5cf6 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}

				.img {
					width: 4.375rem;
					height: 3.125rem;
				}
			}

			.ruleForm {
				padding: 2.5rem 3.75rem;
				// background: rgba(43, 81, 135, 0.35);
				// border: 2px solid #3e7de1;
			}
		}

		.btn {
			width: 100%;
		}
	}
</style>